.page-content.container-fluid
  .row
    .col-lg-6
      .widget
        .widget-heading
          h3.widget-title Basic Example
        .widget-body
          p
            | Add the base class 
            code .table
            |  to any 
            code &lt;table&gt;
            | .
          table.table
            caption Optional table caption.
            thead
              tr
                th #
                th First Name
                th Last Name
                th Username
            tbody
              tr
                th(scope='row') 1
                td Mark
                td Otto
                td @mdo
              tr
                th(scope='row') 2
                td Jacob
                td Thornton
                td @fat
              tr
                th(scope='row') 3
                td Larry
                td the Bird
                td @twitter
    .col-lg-6
      .widget
        .widget-heading
          h3.widget-title Striped Rows
        .widget-body
          p
            | Use 
            code .table-striped
            |  to add zebra-striping to any table row within the 
            code &lt;tbody&gt;
            | .
          table.table.table-striped
            thead
              tr
                th #
                th First Name
                th Last Name
                th Username
            tbody
              tr
                th(scope='row') 1
                td Mark
                td Otto
                td @mdo
              tr
                th(scope='row') 2
                td Jacob
                td Thornton
                td @fat
              tr
                th(scope='row') 3
                td Larry
                td the Bird
                td @twitter
  .row
    .col-lg-6
      .widget
        .widget-heading
          h3.widget-title Bordered Table
        .widget-body
          p
            | Add 
            code .table-bordered
            |  for borders on all sides of the table and cells.
          table.table.table-bordered
            thead
              tr
                th #
                th First Name
                th Last Name
                th Username
            tbody
              tr
                th(scope='row') 1
                td Mark
                td Otto
                td @mdo
              tr
                th(scope='row') 2
                td Jacob
                td Thornton
                td @fat
              tr
                th(scope='row') 3
                td Larry
                td the Bird
                td @twitter
    .col-lg-6
      .widget
        .widget-heading
          h3.widget-title Hover Rows
        .widget-body
          p
            | Add 
            code .table-hover
            |  to enable a hover state on table rows within a 
            code &lt;tbody&gt;
            | .
          table.table.table-hover
            thead
              tr
                th #
                th First Name
                th Last Name
                th Username
            tbody
              tr
                th(scope='row') 1
                td Mark
                td Otto
                td @mdo
              tr
                th(scope='row') 2
                td Jacob
                td Thornton
                td @fat
              tr
                th(scope='row') 3
                td Larry
                td the Bird
                td @twitter
  .row
    .col-lg-6
      .widget
        .widget-heading
          h3.widget-title Condensed Table
        .widget-body
          p
            | Add 
            code .table-condensed
            |  to make tables more compact by cutting cell padding in half.
          table.table.table-condensed
            thead
              tr
                th #
                th First Name
                th Last Name
                th Username
            tbody
              tr
                th(scope='row') 1
                td Mark
                td Otto
                td @mdo
              tr
                th(scope='row') 2
                td Jacob
                td Thornton
                td @fat
              tr
                th(scope='row') 3
                td(colspan='2') Larry the Bird
                td @twitter
    .col-lg-6
      .widget
        .widget-heading
          h3.widget-title Contextual Classes
        .widget-body
          table.table.table-hover
            tbody
              tr.active
                th(scope='row') 1
                td Content
                td Content
                td Content
              tr.success
                th(scope='row') 3
                td Content
                td Content
                td Content
              tr.info
                th(scope='row') 5
                td Content
                td Content
                td Content
              tr.warning
                th(scope='row') 7
                td Content
                td Content
                td Content
              tr.danger
                th(scope='row') 9
                td Content
                td Content
                td Content
  .row
    .col-lg-12
      .widget
        .widget-heading
          h3.widget-title Responsive Table
        .widget-body
          p
            | Create responsive tables by wrapping any 
            code .table
            |  in 
            code .table-responsive
            |  to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
          .table-responsive
            table.table
              thead
                tr
                  th #
                  th Table heading
                  th Table heading
                  th Table heading
                  th Table heading
                  th Table heading
                  th Table heading
              tbody
                tr
                  th(scope='row') 1
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                tr
                  th(scope='row') 2
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                tr
                  th(scope='row') 3
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
          .table-responsive
            table.table.table-bordered
              thead
                tr
                  th #
                  th Table heading
                  th Table heading
                  th Table heading
                  th Table heading
                  th Table heading
                  th Table heading
              tbody
                tr
                  th(scope='row') 1
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                tr
                  th(scope='row') 2
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                tr
                  th(scope='row') 3
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
                  td Table cell
